<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQSlickWrap - Slick text wrapping for jQuery</title>
        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
        <meta name="author" content="Jason Feinstein"  />
        <meta name="description" content="jQSlickWrap is a plugin for jQuery which allows you to wrap content around irregularly shaped images, easily.  Use float and padding CSS styles to specify how the wrapping will work."/>
        <meta name="keywords" content="jquery,jqslickwrap,slickwrap,float,plugin,wrapping,sandbagging,sandbag,image,canvas,jasonwyatt,jason,feinstein" />
        <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"/>
        
        <link rel="stylesheet" media="all" href="./css/layout.css" type="text/css"/>
        <link rel="stylesheet" media="all" href="./css/index.css" type="text/css"/>
        
        <script src="./thirdparty/jquery-1.3.2.min.js" type="text/javascript" charset="UTF-8"></script>
        <script src="./js/jquery.slickwrap.min.js" type="text/javascript" charset="UTF-8"></script>
    </head>
    <body>
        <div id="placeholder"></div>

        <div class="aboveTheFold">
            <img src="./images/logo.png" alt="jQSlickWrap Logo" title="jQSlickWrap Logo" class="logo" />
            <h1 class="jQSlickWrap"><span class="jQuery">jQ</span>SlickWrap</h1>
            <h2>the pixel-perfect prose plugin</h2>
            <h2 class="version">v0.1.1</h2> 
            <p class="description">need to <span class="emphasis">wrap content</span> around an image?  ...really <span class="emphasis">around</span> an image?</p>
            
            <p><span class="jQSlickWrap emphasis"><span class="jQuery">jQ</span>SlickWrap</span> is a plugin for <span class="jQuery">jQuery</span> which enables you to easily and accurately wrap your text around the content of floated images.</p>
            
            <p>It's as simple as <code>$('img').slickWrap();</code></p>
            
            <p style="text-align:center"><a href="http://code.google.com/p/jqslickwrap/downloads/detail?name=jquery.slickwrap.min.js" title="Download jQSlickWrap" class="downloadButton">download it!</a></p>
        </div>
        <div class="belowTheFold">
            <ul class="menu">
                <li><a href="#about" title="Jump to About Section">about</a></li>
                <li><a href="#examples" title="Jump to About Section">examples</a></li>
            </ul>
            <a name="about"></a>
            <h1>About</h1>
            <div class="section about">
                <img src="./images/arrow.png" title="Going from normal wrapping to SlickWrapping..." alt="Image showing paragraph difference between normal wrapping and SlickWrapping" class="arrow" />
                <h2>Why would I need this?</h2>
                <p>If you've ever felt the need to wrap stuff around an irregularly-shaped image using CSS's <code>float</code>, you may have been somewhat disappointed to find out that it's forced to wrap around the image's bounding box, rather than the actual contents of the image.</p>
                
                <h2>What's the best part?</h2>
                <p>It's really easy to use! Check out some of the <a href="#examples" title="Jump to About Section">examples</a> for ideas...</p>
                
                <h2>Tell me about what it can do...</h2>
                <ul>
                    <li>Client-side, <a href="http://www.alistapart.com/articles/sandbags" target="_blank" title="Sliced and Diced Sandbags on A List Apart">Sliced and Diced Sandbags</a> using HTML 5's new <code>&lt;canvas /&gt;</code> element.</li>
                    <li>CSS-based padding.</li>
                    <li>Sandbag "resolution" is configurable.</li>
                    <li>Written with Progressive Enhancement in mind.</li>
                    <li>Optional "bloom" mode provides ultra-precise padding.</li>
                </ul>
                
                <h2>What browsers does it work on?</h2>
                <p>jQSlickWrap requires that your browser support HTML 5's <code>&lt;canvas&gt;</code> element, and in particular it needs to have support for the <code>toDataURL()</code> function on canvases (meaning it won't work with <a href="http://excanvas.sourceforge.net/" target="_blank">excanvas</a>, for now).  jQSlickWrap is known to work on the following browsers:</p>
                <ul>
                    <li>Mozilla Firefox 3.5+</li>
                    <li>Google Chrome</li>
                    <li>Apple Safari 4+</li>
                </ul>
                <p>If you happen to know that it works on additional browsers, let me know on <a href="http://twitter.com/jasonwyatt" target="_blank">twitter</a>.</p>
                
                <h2>How does it work?</h2>
                <div class="howItWorks">
                    <img src="./images/shovel_man.png" alt="Man with a shovel." title="Man with a shovel." class="wrap right"/>
                    <p>Not interested in the nitty gritty low down on how jQSlickWrap works its "magic"? Skip ahead to the <a href="#examples" title="Skip to Examples">examples</a>.</p>
                    <p>As stated in the features list above, jQSlickWrap implements a client-side version of the <a href="http://www.alistapart.com/articles/sandbags" target="_blank" title="Sliced and Diced Sandbags on A List Apart">Sliced and Diced Sandbags</a> method of wrapping text around an irregularly-shaped object (all bundled in a nice tidy <a href="http://www.jquery.com/" title="Go to jquery.com" target="_blank">jQuery</a> plugin, of course).</p>
                    <p>To do this, it needs to have access to the individual pixels of the images it's operating on -- which is why for jQSlickWrap to work, you need to have a browser that supports HTML 5's new <code>&lt;canvas&gt;</code> element.</p>
                    <h3>Here's an overview of the algorithm:</h3>
                    <ol>
                        <li>If necessary, pre-load the image.</li>
                        <li>Determine the CSS styles for the image (<code>float</code> and <code>padding</code>).</li>
                        <li>Create a <code>&lt;canvas&gt;</code> element and set its dimensions to the size of the image plus its padding.</li>
                        <li>Draw the image onto the canvas in the top-left location.</li>
                        <li>Figure out the "background" color of the image by examining the pixel data at the top-left corner of the image.</li>
                        <li>Fill the <code>&lt;canvas&gt;</code> with this background color.</li>
                        <li>Re-draw the image contents onto the <code>&lt;canvas&gt;</code>, but now in the correct location as specified by its padding.</li>
                        <li>Iterate through the image to find the "edge" of the image's contents at each row - save this width. (the size of a row is defined to be the <code>resolution</code> in the settings to a call to <code>slickWrap</code>).</li>
                        <li>Using the widths collected in the previous step, generate <code>&lt;div&gt;</code> elements of those sizes.</li>
                        <li>Float the <code>&lt;div&gt;</code>s to the correct side, and set their <code>clear</code> style to the same side.</li>
                        <li>Set the <code>background-image</code> to a non-repeating image described by a call to <code>canvas.toDataURL()</code> for the original's containing element.</li>
                        <li>Hide the original image.</li>
                    </ol>
                </div>
            </div>
            <a name="examples"></a>
            <h1>Examples</h1>
            <div class="section examples">
                <h2>Example 1 - Basic SlickWrapping</h2>
                <div class="example">
                    <p>All you need to SlickWrap your images is to call the <code>slickWrap</code> function on the results of a jQuery query:</p>
                    <pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;jQSlickWrap Demo 1&lt;/title&gt;
        &lt;script src="./jquery-1.3.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script src="./jquery.slickwrap.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;style type="text/css"&gt;
            <b>.wrapReady {
                float: left;
            }</b>
        &lt;/style&gt;
        &lt;script type="text/javascript" charset="UTF-8"&gt;
            <b>$(document).ready(function(){
                $('.wrapReady').slickWrap();
            });</b>
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        <b>&lt;img src="./myImage.jpg" class="wrapReady" /&gt;</b>
        &lt;p&gt;Lots of text goes here..&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
                    <p>See it in action <a href="./example1.html">here</a>!</a>
                    <p>Note: the images selected by the query should have some sort of <code>float</code> styling applied to them.  Either <code>float: right</code> or <code>float: left</code></p>
                </div>
                
                
                <h2>Example 2 - SlickWrapping With Style</h2>
                <div class="example">
                    <p>jQSlickWrap is capable of figuring out what kind of padding you want to use when you SlickWrap an image by looking at each image's styling.  Just make sure you've got the <code>padding</code> css style on your image:</p>
                    <pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;jQSlickWrap Demo 2&lt;/title&gt;
        &lt;script src="./jquery-1.3.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script src="./jquery.slickwrap.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;style type="text/css"&gt;
            <b>.wrapReady {
                float: left;
                padding: 30px;
            }</b>
        &lt;/style&gt;
        &lt;script type="text/javascript" charset="UTF-8"&gt;
            <b>$(document).ready(function(){
                $('.wrapReady').slickWrap();
            });</b>
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        <b>&lt;img src="./myImage.jpg" class="wrapReady" /&gt;</b>
        &lt;p&gt;Lots of text goes here..&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
                    <p>See it in action <a href="./example2.html">here</a>!</a>
                </div>
                
                
                <h2>Example 3 - Specifying Settings</h2>
                <div class="example">
                    <p>In addition to being able interpret some settings from the CSS styling on image elements, it is also possible to specify several other settings to customize the way SlickWrapping will be done.</p>
                    <h3>Settings:</h3>
                    <ol>
                        <li><code>bgColor</code> - The background color to use when examining the contents of the images resulting from a query.  If no value is given, jQSlickWrap will try to determine the background color of the image from the image's top-left pixel.</li>
                        <li><code>cutoff</code> - The maximum allowable "distance" between a pixel's color and the background color that will qualify that pixel as being considered as part of the background. Defaults to <code>5</code>.</li>
                        <li><code>resolution</code> - The height of the div elements to be created.  Default value is <code>20</code>.</li>
                        <li><code>bloomPadding</code> - Whether or not to use the advanced "bloom" algorithm to calculate precise padding distances.  This is very slow in the current version, so the default value is <code>false</code>.</li>
                    </ol>
                    <pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;jQSlickWrap Demo 3&lt;/title&gt;
        &lt;script src="./jquery-1.3.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script src="./jquery.slickwrap.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;style type="text/css"&gt;
            <b>.wrapReady {
                float: left;
                padding: 30px;
            }</b>
        &lt;/style&gt;
        &lt;script type="text/javascript" charset="UTF-8"&gt;
            <b>$(document).ready(function(){
                $('.wrapReady').slickWrap({
                    bgColor: {              // use red as the background color
                        r: 255,
                        g: 0,
                        b: 0,
                        a: 255
                    },
                    cutoff: 10,             // let there be a tolerance of 10
                    resolution: 15,         // create divs of height 15
                    bloomPadding: false     // let's not use bloom
                });
            });</b>
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        <b>&lt;img src="./myImage.jpg" class="wrapReady" /&gt;</b>
        &lt;p&gt;Lots of text goes here..&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
                    <p>See it in action <a href="./example3.html">here</a>!</a>
                </div>
            </div>
        </div>
        <div class="footer">
            <p><span class="jQSlickWrap"><span class="jQuery">jQ</span>SlickWrap</span> &copy; 2009 <a href="http://jwf.us" target="_blank" title="Go to Jason's Web Site!">Jason Feinstein</a></p>
            <p>If you like <span class="jQSlickWrap"><span class="jQuery">jQ</span>SlickWrap</span>, check out <a href="http://jwf.us/projects/jQReflect" target="_blank" title="Go to jQReflect">jQReflect</a> and follow <a href="http://twitter.com/jasonwyatt" title="Jason's Twitter Page" target="_blank">@JasonWyatt</a> on Twitter!</p>
            <p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
        </div>
        
        
        <script type="text/javascript" charset="UTF-8">
            $(document).ready(function(){
                $(".logo").slickWrap({resolution: 24});
                $(".wrap").slickWrap();
            });
        </script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"> </script>
        <script type="text/javascript">
         CFInstall.check({
            node: "placeholder",
            destination: "http://www.waikiki.com"
          });
        </script>
        <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
        try {
        var pageTracker = _gat._getTracker("UA-9451812-2");
        pageTracker._trackPageview();
        } catch(err) {}</script>

    </body>
</html>